import React, { Component } from 'react';
import '../styles/search.scss'
import Header from '../components/MyHeader/header'
import { SearchBar } from 'antd-mobile'
import {commodity_list} from '../apis/api'
class search extends Component {
    
    state = {
        data: [],
        list: [],
        
    }
    toDetails = (value) => {
        this.props.history.push({ pathname: '/AllProducts', state: { searchkey: value } });
    }
    toAllProducts = (searchkey) => {
        this.props.history.push('/allProducts',{searchkey})
    }
    componentDidMount() {
        commodity_list().then((ref) => {
            console.log(ref);
            this.setState({
                list:ref.data.list
            })
        })
    }





    render() {
        return (
            <div className='search'>
                <Header title='搜索' />
                <SearchBar placeholder='搜索店铺内商品'  onSearch={this.toDetails} showCancelButton={() => true} />
                <div className='searchHistory'>
                    {/* 搜索历史 */}
                    <div className="heading">
                        <h3>最近搜索</h3>
                        <i className='iconfont icon-shanchu'></i>
                    </div>
                    <ul className="records">
                      
                    </ul>
                    {/* 搜索发现 */}
                    <div className='head'>
                        <h3>热门搜索</h3>
                    </div>
                    <ul className="records">{
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index} onClick={()=>{this.toAllProducts(item)}}>{item}</li>
                            )
                        })
                    }
                        
                    </ul>
                </div>
 
            </div>
        );
    }
}

export default search;